<template>
	<div class="app-container">
		<el-row>
			<el-col :span="showFollow == true?18:24">
				<el-form ref="formData" :model="formData" :rules="rules" label-width="80px" class="demo-ruleForm" :disabled="showFollow">
					1/5基本信息
					<el-row>
						<el-col :span="8">
							<el-form-item label="姓名" prop="student_name">
							  <el-input v-model="formData.student_name" placeholder="请输入姓名" :value="formData.student_name" />
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="性别" prop="sex">
							  <el-select v-model="formData.sex" placeholder="请选择性别">
							    <el-option label="男" :value="1" />
							    <el-option label="女" :value="2" />
							  </el-select>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="证件号码" prop="card">
							  <el-input v-model="formData.card" placeholder="请输入证件号码" class="input-with-select">
							    <el-select slot="prepend" v-model="formData.card_type" placeholder="请选择证件类型" style="width: 90px">
							      <el-option label="身份证" :value="1" />
							    </el-select>
							  </el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="民族">
							  <el-input v-model="formData.nation" placeholder="请输入民族" :value="formData.nation" />
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="国籍">
							  <el-input v-model="formData.nationality" placeholder="请输入国籍" :value="formData.nationality" />
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="出生年月">
							  <el-date-picker v-model="formData.birth_date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" type="date" placeholder="请选择出生年月日"></el-date-picker>
							</el-form-item>
						</el-col>
					</el-row>
					2/5家庭信息
					<el-scrollbar :style="{'height': formData.home.length>1?120+'px':60+'px'}">
						<el-row v-if="formData.home.length!=0" v-for="(item,index) in formData.home" :key="index">
							<el-col :span="6">
								<el-form-item label="家长姓名" :prop="`home[${index}].parent_name`" :rules="{ required: true, message: '请输入姓名', trigger: 'blur,change' }">
								  <el-input v-model="item.parent_name" placeholder="请输入家长姓名" style="width: 300px;" />
								</el-form-item>
							</el-col>
							<el-col :span="6">
								<el-form-item label="家长称谓">
								  <el-select v-model="item.relation" placeholder="请选择称谓" style="width: 300px;">
								    <el-option label="爸爸" :value="1" />
								    <el-option label="妈妈" :value="2" />
								    <el-option label="爷爷" :value="3" />
								    <el-option label="奶奶" :value="4" />
								  </el-select>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="联系电话" :prop="`home[${index}].phone`" :rules="[{ required: true, message: '请输入联系方式', trigger: 'blur,change' },{ message: '电话号码格式有误', trigger: 'blur,change', pattern: /(^1[3|4|5|7|8][0-9]{9}$)/ }]">
								  <el-input v-model="item.phone" placeholder="请输入" style="width: 300px;margin-right: 23px;">
								    <template slot="prepend">+86</template>
								  </el-input>
								  <el-button type="primary" v-show="index==0" @click="addContacts">添加联系人</el-button>
								  <el-button type="danger" v-show="index>0" @click="remove(index)">移除</el-button>
								</el-form-item>
							</el-col>
						</el-row>
					</el-scrollbar>
					<!-- <div style="text-align: center;" v-show="!showFollow">
						<el-button type="primary" @click="addContacts">添加联系人</el-button>
					</div> -->
					3/5招生信息
					<el-row v-if="formData.recruit">
						<el-col :span="6">
							<el-form-item label="申请学期" :prop="`recruit.semester_id`" :rules="{ required: true, message: '请选择学期', trigger: 'blur,change' }">
							  <el-select v-model="formData.recruit.semester_id" class="select" placeholder="请选择申请学期">
							    <el-option v-for="(item,index) in semesterList" :key="index" :label="item.semester_name" :value="item.unid" />
							  </el-select>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="申请年级" :prop="`recruit.grade`" :rules="{ required: true, message: '请选择年级', trigger: 'blur,change' }">
							  <el-select v-model="formData.recruit.grade" class="select" placeholder="请选择申请年级">
							    <el-option v-for="(item,index) in grade" :key="index" :label="item" :value="index" />
							  </el-select>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="申请课程" :prop="`recruit.course_id`" :rules="{ required: true, message: '请选择课程', trigger: 'blur,change' }">
							  <el-select v-model="formData.recruit.course_id" class="select" placeholder="请选择申请课程">
							    <el-option v-for="(item,index) in lessionList" :key="index" :label="item.lession_name" :value="item.unid" />
							  </el-select>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="所属校区">
							  <el-select v-model="formData.recruit.school_id" class="select" placeholder="请选择校区">
							    <el-option label="所属校区" :value="1" />
							  </el-select>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="招生来源" :prop="`recruit.way_id`" :rules="{ required: true, message: '请选择渠道', trigger: 'blur,change' }">
							  <el-select v-model="formData.recruit.way_id" class="select" placeholder="请选择招生来源">
							    <el-option v-for="(item,index) in way" :key="index" :label="item" :value="index+1" />
							  </el-select>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="推荐人">
							  <el-input v-model="formData.recruit.referrer" placeholder="请输入推荐人" style="width: 200px;" />
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="主跟进人">
							  <el-input v-model="formData.recruit.teacher_id" placeholder="默认当前登录账号" style="width: 200px;" disabled />
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="副跟进人">
							  <el-select v-model="formData.recruit.deputy_teacher_id" class="select" placeholder="请选择">
							    <el-option label="副跟进人" :value="1" />
							  </el-select>
							</el-form-item>
						</el-col>
					</el-row>
					<div style="text-align: left;margin-bottom: 20px;">
						<span>意向度</span>
						<el-rate v-model="formData.intention" />
					</div>
					4/5学业信息
					<el-row v-if="formData.course">
						<el-col :span="4">
							<el-form-item label="曾读学校">
							  <el-select v-model="formData.course.school" class="select" placeholder="请选择申请年级">
							    <el-option label="学校" value="学校"/>
							  </el-select>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="语文">
							  <el-input v-model="formData.course.Chinese" placeholder="请输入成绩" />
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="数学">
							  <el-input v-model="formData.course.Mathematics" placeholder="请输入成绩" />
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="英语">
							  <el-input v-model="formData.course.English" placeholder="请输入成绩" />
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="物理">
							  <el-input v-model="formData.course.Physics" placeholder="请输入成绩" />
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="化学">
							  <el-input v-model="formData.course.Chemistry" placeholder="请输入成绩" />
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="曾读年级">
							  <el-select v-model="formData.course.grade" class="select" placeholder="请选择申请年级">
							    <el-option v-for="(item,index) in grade" :key="index" :label="item" :value="index" />
							  </el-select>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="历史">
							  <el-input v-model="formData.course.History" placeholder="请输入成绩" />
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="地理">
							  <el-input v-model="formData.course.Geography" placeholder="请输入成绩" />
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="政治">
							  <el-input v-model="formData.course.Politics" placeholder="请输入成绩" />
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="生物">
							  <el-input v-model="formData.course.Biology" placeholder="请输入成绩" />
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="信息科技">
							  <el-input v-model="formData.course.computer" placeholder="请输入成绩" />
							</el-form-item>
						</el-col>
					</el-row>
					5/5其他信息
					<el-row>
						<el-col :span="24">
							<el-form-item label="户籍地址">
							  <el-cascader
							    ref="cascaderCity"
							    prop="province"
							    placeholder="请选择省/市/区"
							    :value="cityArr"
							    style="width: 300px"
							    :options="options"
							    :props="{
							      value: 'id',
							      label: 'name',
							      ...props
							    }"
							    @change="handleChange"
							  />
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="地址">
							  <el-input v-model="formData.address" placeholder="请输入详细地址" />
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="备注">
							  <el-input v-model="formData.remark" type="textarea" placeholder="请输入，不超过1000字" maxlength="1000" show-word-limit />
							</el-form-item>
						</el-col>
					</el-row>
					<div style="text-align: right;" v-show="!showFollow">
						<el-button type="primary" @click="addStudents('formData',formData)">确定</el-button>
					</div>
				</el-form>
			</el-col>
			<el-col :span="6" v-if="showFollow == true">
				<fol-student :sturow="sturow"></fol-student>
			</el-col>
		</el-row>
		<div v-if="formData.follow" v-show="formData.follow.length!=0">
			<div v-show="formData.follow.length!=0">跟进记录：</div>
			<el-scrollbar :style="{ height:formData.follow.length>1?180+'px':90+'px'}">
				<div v-for="(item,index) in formData.follow">
					<div class="foll">
						<div>{{item.create_time}}</div>
						<div>{{username}}</div>
						<div v-if="item.communication == 1">网上</div>
						<div v-if="item.communication == 2">柜台</div>
						<div v-if="item.communication == 3">电话沟通</div>
					</div>
					<div class="contents">
						<div>沟通内容：{{item.content}}</div>
						<div>下次沟通时间：{{item.next_time}}</div>
					</div>
					<hr />
				</div>
			</el-scrollbar>
		</div>
	</div>
</template>

<script>
import {addStudent} from '@/api/studentRecruit.js'
import addressData from '@/components/CascaderCity/addressData.json'
import folStudent from '../follow/folStudent.vue'
import store from '../../../../store' // get token
export default{
	components:{
		folStudent
	},
	data(){
		return{
			username:'', //用户名
			followStatus:false, //是否是跟进
			cityArr: [], //城市级联
			options: [],
			formData: {
				unid:0, //unid
				intention:0, //意向度
				student_name: '', // 学生名字
				sex: '', // 性别 1:男，2女
				address: '', // 详细地址
				province: 0, // 省
				city: 0, // 市
				area: 0, // 区
				remark: '', // 备注
				card: '', // 身份证
				card_type: '', // 证件类型 1身份证
				nation:'', //民族
				nationality:'', //国籍
				birth_date:'', //生日
				home: [{
				    student_id: 0, // 学生unid
				    phone: '', // 电话
				    parent_name: '', // 家长姓名
				    relation: '' // 称谓 1:爸爸，2妈妈，3爷爷，4奶奶
				}],
				recruit: {
				    semester_id: '', // 学期
				    grade: '', // 年级
				    course_id: '', // 课程
				    teacher_id: store.getters.userId, // 主根进人id
				    student_id: 0, // 学生id
				    deputy_teacher_id: '', // 副跟进人
				    school_id: '', // 所属校区id
				    way_id: 1, // 来源途径 1:口碑介绍，2电话邀约，3课程邀约，4广告宣传，5网络招生
				    referrer: '' // 推荐人
				},
				course: {
				    school: '', // 就读学校
				    grade: '', // 年级
				    Chinese: '', // 语文成绩
				    Mathematics: '', // 数学成绩
				    English: '', // 英语成绩
				    Physics: '', // 物理成绩
				    Chemistry: '', // 化学成绩
				    Biology: '', // 生物成绩
				    History: '', // 历史成绩
				    Politics: '', // 政治成绩
				    Geography: '', // 地理成绩
				    computer: '' // 信息科技
				}
			},
			grade:['一年级','二年级','三年级','四年级','五年级','六年级','初一','初二','初三','高一','高二','高三'],
			way:['口碑介绍','电话邀约','课程邀约','广告宣传','网络招生'],
			rules: {
			    student_name: [
			        { required: true, message: '请输入姓名', trigger: 'blur,change' }
			    ],
			    sex: [
			        { required: true, message: '请输入性别', trigger: 'blur,change' }
			    ],
			    nation: [
			        { required: true, message: '请输入民族', trigger: 'blur,change' }
			    ],
			    nationality: [
			        { required: true, message: '请输入国籍', trigger: 'blur,change' }
			    ],
			    birthday: [
			        { required: true, message: '请选择日期', trigger: 'blur,change' }
			    ],
			    phone: [
			        { required: true, message: '请输入联系方式', trigger: 'blur,change' }
			    ],
			    card: [
			        { required: true, message: '请输入证件号', trigger: 'blur,change' },
					{pattern: /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/, message: '证件号码格式有误！', trigger: 'blur,change'}
			    ],
			    province: [
			        { required: true, message: '请选择省市区', trigger: 'blur,change' }
			    ],
			    address: [
			        { required: true, message: '请输入详细地址', trigger: 'blur,change' }
			    ],
			    card_type: [
			        { required: true, message: '请选择证件类型', trigger: 'blur,change' }
			    ]
			}
		}
		12-1 
		1-2 //12月工资
		2-3 //1月工资
		3-4 //2月工资
		4-5 //3月工资
	},
	created() {
		this.setDefaultCity()
		this.init()
		this.username = store.getters.name
		//主跟进人ID，当前登录账户ID
	},
	watch: {
	    value(val) {
	        if (this.isChange) {
	            this.isChange = false
	        } else {
	            this.setDefaultCity()
	            const panel = this.$refs.cascaderCity.$refs.panel
	            panel.clearCheckedNodes() // 清空级联选择器选中状态
	            panel.activePath = [] // 清除高亮
	        }
	    }
	},
	methods:{
		//组件addStudent点击查看按钮
		clickQuery(row){
			this.formData = row
			this.cityArr = [row.province,row.city,row.area]
			console.log(this.formData);
		},
		//移出学员家庭表单
		remove(index){
			console.log(index);
			this.formData.home.splice(index,1)
		},
		//添加学员信息
		addStudents(formData,row){
			console.log(this.formData);
			//0为添加，否则为编辑
			if(row.unid!=0){
				this.formData.unid = row.unid
			}
			//表单验证
			this.$refs[formData].validate((valid) => {
			  if (valid) {
				  addStudent(this.formData).then(res => {
					console.log('res',res);  
					if(res.code == 200){
						//0为添加，否则为编辑
						if(this.formData.unid==0){
							//家庭信息表单只保留一个
							if(this.formData.home.length>1){
								this.formData.home.splice(0,1)
							}
							Object.keys(this.formData).forEach(key => {
								if(key!='home'&&key!='recruit'&&key!='course'){
									if(key!='intention'&&key!='province'&&key!='city'&&key!='area'){
										this.formData[key] = ''
									}	
								}
							})
							//清空家庭信息
							Object.keys(this.formData.home[0]).forEach(key => {
							  if(key!='student_id'){
								  this.formData.home[0][key] = ''
							  }
							})
							//清空学业信息
							Object.keys(this.formData.course).forEach(key => {
							  if(key!='student_id'&&key!='teacher_id'){
								  this.formData.course[key] = ''
							  }
							})
							//清空招生信息
							Object.keys(this.formData.recruit).forEach(key => {
							  this.formData.recruit[key] = ''
							})
							this.cityArr = [0,0,0]
						}
						this.queryStudent()
						this.$message.success('成功！')
					}else{
						this.$message.error('失败！')
					}
				  })
			  } else {
			    return false;
			  }
			});
			// let data = await addStudent(resData)
		},
		//添加联系人
		addContacts(){
			this.formData.home.push({ student_id: 0 ,phone: '' , parent_name: '' , relation: null })
		},
		//城市级联
		handleChange(event) {
		    this.$emit('change', event)
		    this.cityArr = event
		    let str = ''
		    if (this.props.multiple) { // 多选
		        event.forEach(item => {
		            str += this.handleRegionStr(item) + ','
		        })
		        str = str.slice(0, str.length - 1)
		    } else {
		        str = this.handleRegionStr(event)
		    }
		    this.isChange = true
		    this.$emit('input', str)
		    console.log('选中:', event)
		    this.formData.province = event[0]
		    this.formData.city = event[1]
		    this.formData.area = event[2]
		},
		//初始化数据已选的数据
		setDefaultCity() {
		    // 判断是否有默认区域再判断是否开启多选
		    const value = JSON.parse(JSON.stringify(this.value))
		    let data = []
		    if (value !== '' && typeof value === 'string') {
		        if (this.props.multiple) {
		            data = value.split(',').map(item => {
		                return this.handleDefaultRegion(item)
		            })
		        } else {
		            data = this.handleDefaultRegion(value)
		        }
		    }
		    this.cityArr = data
		},
		//初始化省市区数据
		init() {
		    const cityData = JSON.parse(JSON.stringify(addressData)) // 避免JSON源被改变
		    if (this.isAddAll) {
		        cityData.unshift({ id: 0, name: '全国' }) // 插入全国选项
		    }
		    switch (this.optionType) {
		        case 'regionData': // 省市区
		            this.options = cityData
		            break
		        case 'provinceAndCityData': // 省市
		            this.options = cityData.map(item => {
		                if (item.children) {
		                    item.children.map(item1 => {
		                        item1.children = null // 删除一个最后个区
		                        return item1
		                    })
		                }
		                return item
		            })
		            break
		        default:
		            console.error('请选择正确的optionType！')
		            break
		    }
		},
		//字符串拆分出数组
		handleDefaultRegion(value) {
		    return value.split('/')
		},
		//将数组拼接回字符串
		handleRegionStr(value) {
		    let str = ''
		    value.forEach(item => {
		        str += item + '/'
		    })
		    return str.slice(0, str.length - 1)
		},
	},
	props:{
		sturow:{
			type:Object,
			default:null,
		},
		showFollow:{
			type:Boolean,
			default:false,
		},
		queryStudent:{
			type:Function,
			default:() => {}
		},
		semesterList:{
			type:Array,
			default:[],
		},
		lessionList:{
			type:Array,
			default:[],
		},
		getUserId: {
		    type: [String, Number],
		    default: ''
		},
		/**
		 * 默认区域传入格式:
		 * 非多选(props.multiple = false): 北京市/北京市/东城区
		 * 多选(props.multiple = true): 北京市/北京市/东城区,广东省/广州市/天河区
		 */
		value: {
		    type: String,
		    default: ''
		},
		/**
		 * 默认是regionData
		 * regionData(省市区) provinceAndCityData(省市)
		 */
		optionType: {
		    type: String,
		    default: 'regionData',
		    validator: function(value) {
		        return ['regionData', 'provinceAndCityData'].indexOf(value) !== -1 // 这个值必须匹配下列字符串中的一个
		    }
		},
		/**
		 * 是否需要开启全国
		 */
		isAddAll: {
		    type: Boolean,
		    default: false
		},
		placeholder: {
		    type: String,
		    default: ''
		},
		props: {
		    type: Object,
		    default() {
		        return {}
		    }
		}
	}
}
</script>

<style lang="scss">
	.el-scrollbar__wrap {
	  overflow-x: hidden;
	}
	
	.foll{
		display: flex;
		flex-direction: row;
		margin-bottom: 10px;
		margin-top: 10px;
		
		div{
			margin-rigth: 20px;
			
		}
	}
	
	.contents{
		display: flex;
		flex-direction: column;
		
		div{
			margin-bottom: 10px;
		}
	}
</style>
